<template>
  <div class="champion-detail">
    <div class="champion-container" v-if="student">
      <div class="champion-header">
        <div style="text-align: center; margin-bottom: 20px;">
          <img src="@/assets/emblemAndbadge/系徽4.png" alt="金山学院校徽" class="school-logo-small">
        </div>
        <h1 class="champion-title">{{ student.level }} - {{ student.name }}</h1>
        <p class="champion-subtitle">{{ student.major }}</p>
      </div>
      
      <div class="champion-content">
        <div class="champion-image-container">
          <img :src="student.image" :alt="student.name" class="champion-image">
        </div>
        
        <div class="champion-info">
          <div class="info-section">
            <h2 class="info-title">个人简介</h2>
            <p>{{ student.bio }}</p>
          </div>
          
          <div class="info-section">
            <h2 class="info-title">技术栈</h2>
            <p>{{ student.skills }}</p>
          </div>
          
          <div class="info-section">
            <h2 class="info-title">主要成就</h2>
            <ul class="achievement-list">
              <li class="achievement-item" v-for="(achievement, index) in student.achievementList" :key="index">
                <span class="achievement-icon">{{ achievement.icon }}</span>
                <span>{{ achievement.title }}</span>
              </li>
            </ul>
          </div>
          
          <div class="info-section">
            <span class="champion-badge">{{ student.level }}</span>
            <router-link to="/ranking" class="cta-button">返回牛人榜</router-link>
          </div>
        </div>
      </div>
      
      <div class="resume-section" v-if="student.resume">
        <h2 class="info-title">个人简历</h2>
        <p class="resume-desc">查看该学生的完整个人简历，了解更多详细信息。</p>
        <a :href="student.resume" class="cta-button" target="_blank">下载简历</a>
      </div>
      
      <div class="champion-projects" v-if="student.projects && student.projects.length">
        <h2 class="info-title">代表项目</h2>
        <div class="project-list">
          <div class="project-item" v-for="(project, index) in student.projects" :key="index">
            <h3 class="project-title">{{ project.name }}</h3>
            <p class="project-desc">{{ project.description }}</p>
            <div class="project-tech">
              <span v-for="(tech, tIndex) in project.technologies" :key="tIndex">{{ tech }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="not-found" v-else>
      <h2>未找到该学生信息</h2>
      <router-link to="/ranking" class="cta-button">返回牛人榜</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChampionDetailView',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      students: {
        jiangwei: {
          name: 'DUIJ',
          major: '计算机科学与技术专业1班',
          specialty: 'Java全栈开发专家',
          level: '最强王者',
          image: 'https://via.placeholder.com/400x500',
          bio: 'DUIJ，金山学院计算机科学与技术专业1班学生，Java全栈开发专家，在Java、Spring Boot、Spring Cloud、微服务架构等多个领域都有深厚造诣。擅长高并发系统设计与开发，熟练使用MySQL、Redis等数据库，掌握Docker、Kubernetes等容器技术，具有丰富的企业级应用开发经验。精通算法竞赛，在多个国内外编程竞赛中取得优异成绩。作为本届最强王者，他不仅在学术上取得了优异成绩，还积极参与各类竞赛和项目实践，在网络安全领域也展现出色实力。',
          skills: 'Java、全栈开发、算法竞赛、数学建模、网络安全、Spring Boot、Spring Cloud、MySQL、Redis、微服务架构、Docker、Kubernetes、RabbitMQ、高并发设计',
          achievementList: [
            { icon: '🏆', title: 'ISCC国赛一等奖' },
            { icon: '🥈', title: '全国大学生数学建模竞赛福建省二等奖' },
            { icon: '🥈', title: '华为ICT全球二等奖' },
            { icon: '🌟', title: 'Google Code Jam总决赛选手' }
          ],
          resume: 'src/oldProject/江炜-Java后端开发 (1)(1).pdf',
          projects: [
            {
              name: '企业级微服务电商平台',
              description: '基于Spring Cloud架构的分布式电商系统，包含用户服务、商品服务、订单服务、支付服务等模块，采用Docker容器化部署，Kubernetes编排管理，支持高并发访问。',
              technologies: ['Java', 'Spring Boot', 'Spring Cloud', 'MySQL', 'Redis', 'RabbitMQ', 'Docker', 'Kubernetes']
            },
            {
              name: '网络安全态势感知系统',
              description: '基于大数据技术的网络安全态势感知系统，实时监控网络流量，检测异常行为，预警潜在安全威胁，支持可视化展示和报表分析。',
              technologies: ['Java', 'Spring Boot', 'Elasticsearch', 'Kafka', 'Python', 'Vue.js', 'ECharts']
            }
          ]
        },
        linjiabei: {
          name: '林加贝',
          major: '计算机科学与技术专业1班',
          specialty: '全能型选手',
          level: '技术达人',
          image: 'https://via.placeholder.com/400x500',
          bio: '林加贝，金山学院计算机科学与技术专业1班学生，全能型选手，在Web前端开发、移动应用开发、UI/UX设计等多个领域均有涉猎。擅长React、Vue等前端框架，熟悉Flutter、React Native等跨平台开发技术，对设计有独到见解。作为本届技术达人，他不仅技术全面，还积极参与各类创新创业比赛，多次获得省级以上奖项。',
          skills: 'React、Vue、Flutter、React Native、UI/UX设计、JavaScript、TypeScript、Node.js、MongoDB、Express、Next.js、Figma',
          achievementList: [
            { icon: '🏆', title: '2024年福建省闽盾杯一等奖' },
            { icon: '🏆', title: 'ISCC国赛一等奖' },
            { icon: '🥇', title: '2024年首届全国高校网络安全管理运维赛华南赛区第七名' },
            { icon: '🌟', title: 'CVE-2024-40434、上海交通大学漏洞报送证书' }
          ],
          resume: 'src/oldProject/林贺简历-安全攻防.pdf',
          projects: [
            {
              name: '校园综合服务平台',
              description: '面向高校师生的综合服务平台，包含课表查询、成绩查询、校园资讯、失物招领等功能模块，采用前后端分离架构，支持小程序和Web多端访问。',
              technologies: ['React', 'TypeScript', 'Node.js', 'MongoDB', 'Express', 'Taro', '微信小程序']
            },
            {
              name: '智慧教室管理系统',
              description: '基于物联网技术的智慧教室管理系统，支持教室预约、设备控制、考勤统计等功能，整合人脸识别技术实现智能考勤。',
              technologies: ['Vue', 'Flask', 'MySQL', 'MQTT', 'WebSocket', 'TensorFlow.js']
            }
          ]
        },
        chenhao: {
          name: '陈日天',
          major: '计算机科学与技术专业1班',
          specialty: '全栈技术专家',
          level: 'AI先锋',
          image: 'https://via.placeholder.com/400x500',
          bio: '陈日天，金山学院计算机科学与技术专业1班学生，AI先锋，在机器学习、深度学习、计算机视觉等领域有深入研究。熟练掌握Python、TensorFlow、PyTorch等AI开发工具，擅长目标检测、图像分类、自然语言处理等任务。拥有华为HCIP-AI认证，积极参与各类AI竞赛和项目，在人工智能领域展现出色实力。',
          skills: 'C/C++、Python、AI模型训练、YOLOv5/v7/v11、TensorFlow、PyTorch、边缘检测、自然语言处理、机器学习',
          achievementList: [
            { icon: '🏆', title: '华为AI-HCIP认证' },
            { icon: '🥈', title: '全国人工智能创新应用大赛二等奖' },
            { icon: '🥉', title: '中国高校计算机大赛-人工智能创意赛铜奖' },
            { icon: '🌟', title: '福建省大学生人工智能挑战赛一等奖' }
          ],
          resume: 'src/oldProject/蓝白色简约通用应届生求职简历 副本.pdf',
          projects: [
            {
              name: '智能垃圾分类系统',
              description: '基于YOLOv7的智能垃圾分类系统，通过深度学习技术实现对各类垃圾的准确识别和分类，支持实时视频流处理和边缘设备部署。',
              technologies: ['Python', 'YOLOv7', 'PyTorch', 'OpenCV', 'Flask', 'TensorRT', 'NVIDIA Jetson']
            },
            {
              name: '中文情感分析系统',
              description: '基于BERT的中文文本情感分析系统，可对用户评论、社交媒体文本等进行情感倾向分析，支持多维度情感标签和情感强度分析。',
              technologies: ['Python', 'BERT', 'TensorFlow', 'HuggingFace', 'Flask', 'Vue.js', 'ECharts']
            }
          ]
        }
      }
    }
  },
  computed: {
    student() {
      return this.students[this.id] || null;
    }
  }
}
</script>

<style scoped>
.champion-detail {
  padding: 20px;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  min-height: 80vh;
}

.champion-container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.school-logo-small {
  width: 80px;
  height: 80px;
}

.champion-header {
  text-align: center;
  margin-bottom: 40px;
}

.champion-title {
  color: #3a6ea5;
  font-size: 2.5em;
  margin-bottom: 10px;
}

.champion-subtitle {
  color: #666;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.champion-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.champion-image-container {
  flex: 1;
  min-width: 300px;
}

.champion-image {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.champion-info {
  flex: 2;
  min-width: 300px;
}

.info-section {
  margin-bottom: 20px;
}

.info-title {
  color: #3a6ea5;
  font-size: 1.5em;
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.achievement-list {
  list-style: none;
  padding: 0;
}

.achievement-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.achievement-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.champion-badge {
  background: gold;
  color: #3a6ea5;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
}

.cta-button {
  display: inline-block;
  background-color: #3a6ea5;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 30px;
  text-align: center;
  font-weight: bold;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #2a5282;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.resume-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.resume-desc {
  color: #666;
  margin-bottom: 15px;
}

.champion-projects {
  margin-top: 30px;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.project-item {
  flex: 1;
  min-width: 300px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.project-title {
  color: #3a6ea5;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.project-desc {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-tech span {
  background: #eee;
  padding: 3px 10px;
  border-radius: 15px;
  font-size: 12px;
  color: #666;
}

.not-found {
  text-align: center;
  padding: 50px;
  background: white;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 500px;
}

.not-found h2 {
  color: #e63946;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .champion-content {
    flex-direction: column;
  }
  
  .project-item {
    min-width: 100%;
  }
}
</style> 